<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <!-- 在这里用link标签引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
</body>

</head>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
<style>
    /* 清除默认样式 */
    *{
        margin: 0;
        padding: 0;
    }
    /* 令html，body在全屏显示 */
    html,body{
        height: 100%;
    }
    body{
        /* 先在父元素上设置grid布局 */
        display: grid;
        grid:var(--吕形);
        /* 给个合适的间距 */
        gap: 5px;
        }
        /* 上栏 */
        .top{
            /* 给个高度或者用内容撑开，不然的话高度会变成0 */
            height: 60px;
            /* 给个好看的渐变色 */
            background: var(--紫灰);
        }
    /* 下栏 */
    .bottom{
        /* 下栏会根据上栏的高度自适应，所以不用写高度 */
        /* 给个好看的渐变色 */
        background: var(--极光绿);
        /* 竖直方向超出部分会出现滚动条 */
        overflow-y: auto;
    }
</style>
</html>